<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts图表切换示例</title>
    <!-- 引入ECharts -->
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js" ></script>
    <style>
        .tab-buttons {
            margin-bottom: 20px;
        }
        .tab-button {
            padding: 10px 20px;
            cursor: pointer;
            border: 1px solid #ccc;
            background: #f0f0f0;
        }
        .tab-button.active {
            background: #fff;
            border-bottom: 1px solid #fff;
        }
        .chart-container {
            width: 100%;
            height: 500px;
        }
        .chart {
            width: 100%;
            height: 100%;
            display: none;
        }
        .chart.active {
            display: block;
        }
    </style>
</head>
<body>
    <!-- 选项卡按钮 -->
    <div class="tab-buttons">
        <button class="tab-button active" onclick="switchChart('chart1', this)">柱状图</button>
        <button class="tab-button" onclick="switchChart('chart2', this)">折线图</button>
        <button class="tab-button" onclick="switchChart('chart3', this)">饼图</button>
    </div>

    <!-- 图表容器 -->
    <div class="chart-container">
        <div id="chart1" class="chart active"></div>
        <div id="chart2" class="chart"></div>
        <div id="chart3" class="chart"></div>
    </div>

    <script>
        // 初始化所有图表
        let chart1 = echarts.init(document.getElementById('chart1'));
        let chart2 = echarts.init(document.getElementById('chart2'));
        let chart3 = echarts.init(document.getElementById('chart3'));

        // 配置图表选项
        // 柱状图配置
        chart1.setOption({
            title: { text: '柱状图示例' },
            tooltip: {},
            xAxis: {
                data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        });

        // 折线图配置
        chart2.setOption({
            title: { text: '折线图示例' },
            xAxis: {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: { type: 'value' },
            series: [{
                data: [150, 230, 224, 218, 135, 147, 260],
                type: 'line'
            }]
        });

        // 饼图配置
        chart3.setOption({
            title: { text: '饼图示例' },
            tooltip: { trigger: 'item' },
            series: [{
                name: '访问来源',
                type: 'pie',
                radius: '50%',
                data: [
                    { value: 1048, name: '搜索引擎' },
                    { value: 735, name: '直接访问' },
                    { value: 580, name: '邮件营销' }
                ]
            }]
        });

        // 切换图表函数
        function switchChart(chartId, element) {
            // 移除所有激活状态
            document.querySelectorAll('.chart').forEach(chart => {
                chart.classList.remove('active');
            });
            document.querySelectorAll('.tab-button').forEach(btn => {
                btn.classList.remove('active');
            });

            // 添加激活状态
            document.getElementById(chartId).classList.add('active');
            element.classList.add('active');

            // 自动调整图表大小
            setTimeout(() => {
                echarts.getInstanceByDom(document.getElementById(chartId)).resize();
            }, 0);
        }

        // 窗口大小变化时自动调整
        window.addEventListener('resize', () => {
            chart1.resize();
            chart2.resize();
            chart3.resize();
        });
    </script>
</body>
</html>